<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <link href="/layui/css/layui.css" media="all" rel="stylesheet">
        </link>
    </head>
    <body>
        <script src="/layui/layui.js">
        </script>
        <form class="layui-form">
            <table class="layui-table" id="demo" lay-filter="demo">
                <colgroup>
                    <col width="150">
                        <col width="200">
                            <col>
                            </col>
                        </col>
                    </col>
                </colgroup>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>月份</th>
                        <th>采购水果金额</th>
                        <th>采购小食金额</th>
                        <th>水果期末盘点</th>
                        <th>小食期末盘点</th>
                        <th>合计</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($month as $item)
                    <tr>
                        <td>
                            {{$loop->iteration}}
                        </td>
                        <td>
                            {{$item}}
                        </td>
                        <td>
                            <input autocomplete="off" class="layui-input buy_fruit" lay-verify="number" name="buy_fruit_{{$loop->iteration}}" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" class="layui-input buy_snacks" lay-verify="number" name="buy_snacks_{{$loop->iteration}}" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" class="layui-input fruit_inventory" lay-verify="number" name="fruit_inventory_{{$loop->iteration}}" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" class="layui-input snacks_inventory" lay-verify="number" name="snacks_inventory_{{$loop->iteration}}" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" class="layui-input month_of_end_sum" lay-verify="number" name="month_of_end_sum_{{$loop->iteration}}" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            {{csrf_field()}}
            
        </form>
        <button class="layui-btn sub">
            立即提交
        </button>
    </body>
</html>
<script>
    //Demo
    layui.use(['form','table'], function () {
        var table = layui.table;
        var form = layui.form;

        //监听提交
        $('.sub').on('click', function() {
            layer.msg('已提交');
            //layer.msg(JSON.stringify(data.field));
            var sum_data = [[],[],[],[],[],[],[],[],[],[],[],[]];

            var buy_fruit = []; //
            var buy_snacks = [];
            var fruit_inventory = [];
            var snacks_inventory= [];
            var month_of_end_sum = [];

            $('.buy_fruit').each(function () {
                var values = $(this).val();
                buy_fruit.push(values);
            });
            $('.snacks_inventory').each(function () {
                var values = $(this).val();
                snacks_inventory.push(values);
            });
            $('.buy_snacks').each(function () {
                var values = $(this).val();
                buy_snacks.push(values);
            });
            $('.fruit_inventory').each(function () {
                var values = $(this).val();
                fruit_inventory.push(values);
            });
            $('.month_of_end_sum').each(function () {
                var values = $(this).val();
                month_of_end_sum.push(values);
            });
            for (var i = 0; i <= 11; i++) {
                sum_data[i].push(buy_fruit[i]);
                sum_data[i].push(buy_snacks[i]);
                sum_data[i].push(snacks_inventory[i]);
                sum_data[i].push(fruit_inventory[i]);
                sum_data[i].push(month_of_end_sum[i]);
            }

            table.exportFile(['采购水果金额','采购小食金额','水果期末盘点','小食期末盘点','合计'], sum_data, '水果小食存货明细表.csv'); //默认导出 csv，也可以为：xls
            return false;
        });
    });
</script>